<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="../js/jquery-1.10.1.min.js"></script>
    <title>Document</title>
    <style>
        .box {
            width: 200px;
            height: 200px;
            background-color: rgb(147, 218, 212);
            margin: auto;
        }

        .active {
            border: 1px solid white;
            background: #E88D79;
        }

        .clickHander {
            background-color: rgb(188, 123, 190);
            border: 2px solid rgb(24, 22, 22);
        }
    </style>
</head>

<body>
    <div class="box"></div>
    <div id="wrap">
        <h2>jQuery属性</h2>
        <button>新增</button>
        <button>触发</button>
        <button>自定义</button>
        <div class="list">
            <li>00</li>
            <li class="first">01</li>
            <li>02</li>
            <li>03</li>
            <li class="mid">周宇</li>
            <li>05</li>
            <li class="last"><span>06</span></li>
        </div>
    </div>
</body>
<script>
    // jQuery中的事件对象可以正常使用  是根据原本的事件对象二次封装出来的
    // e.stopPropagation  阻止事件冒泡
    // e.preventDefault   阻止默认行为


    // click
    $(".list li").click(function () {
        $(this).addClass("active").siblings().removeClass("active");
    })


    // mouseenter  mouseleave
    $(".box").mouseenter(function () {
        $(this).css({
            background: "#B6A4B4"
        })
    }).mouseleave(function () {
        $(this).css({
            background: "#D1CBCF"
        })
    })

    // jQuery进一步封装
    $(".box").hover(function () {  // 移入时调用的回调函数
        $(this).css({
            background: "#B6A4B4"
        })
    }, function () {   // 移出时调用的回调函数
        $(this).css({
            background: "#D1CBCF"
        })
    })


    // jQuery中事件的 绑定 和 清除

    // on  绑定事件
    // 1.普通绑定=> 对应元素绑定 (在页面中必须存在)  $(ele).on(eventType,data,callback)
    // ele          绑定事件的元素
    // eventType    绑定事件的类型
    // data         (可选)传入的数据  => 通过e.data获取
    // callback     事件触发时执行的回调函数

    function clickHandler() {
        $(this).addClass("clickHander").siblings().removeClass("clickHander");
    }
    $(".list li").on("click", { a: 1, b: 2 }, clickHandler)


    // off  清除事件
    // $(ele).off(eventType,data,callback)
    // ele          清除事件的元素
    // eventType    清除事件的类型
    // data         (可选)传入的数据  => 通过e.data获取
    // callback     对应函数名清除

    // 1.对应清除,一个一个清
    $(".list li").off("click", clickHandler)
    // 2.对应事件类型清除 (不需要对应函数)
    $(".list li").off("click");
    // 清除对应元素所有的事件
    $(".list li").off();



    // 2.事件委托绑定事件
    // $(parent).on(eventType,target,data,callback)
    // parent       被委托的父代元素(页面中已存在)
    // eventType    清除事件的类型
    // target       委托啥时间的元素
    // data         (可选)传入的数据  => 通过e.data获取
    // callback     对应函数名清除
    $("#wrap").on("click", ".list li", { a: 1, b: 2 }, function () {
        // this 指向li
        console.log($(this).index());
        $(this).css({
            background: "#DEBDDA"
        });
    })
    $("button").eq(0).click(function () {
        $("<li>", {
            html: "我是新增的li",
            class: "newLi"
        }).appendTo(".list");
    })



    // one()  语法通on  为每一个匹配元素的特定事件(像click)绑定一个一次性的事件处理函数
    $(".list li").one("click", function () {
        $(this).addClass("active").siblings().removeClass("active");
    })


    // 主动触发事件
    $("button").eq(1).click(function () {
        // 方法一：
        $(".last").click();
        // 方法二：
        $("button").eq(0).trigger("click")
    })


    // 自定义事件
    // 通过使用on方法 自定义事件
    // 通过trigger 方法 对应事件触发
    $(".list li").on("haha", function () {
        $(this).addClass("active").siblings().removeClass("active");
    })

    $("button").eq(2).click(function () {
        $(".first").trigger("haha")
    })


</script>

</html>